<template>
	<view class="container">
		<view class="myorder_tit">
			<view class="myorder_tul">
				<view class="myorder_tli" :class="status==0?'active':''" @click="qiehuan" :data-v="0">未使用（{{num1}}）
				</view>
				<view class="myorder_tli" :class="status==1?'active':''" @click="qiehuan" :data-v="1">已使用（{{num2}}）
				</view>
				<view class="myorder_tli" :class="status==2?'active':''" @click="qiehuan" :data-v="2">已过期（{{num3}}）
				</view>
			</view>
		</view>
		<!--没有信息的时候显示-->
		<view class="myorder_no" v-if="rows.length==0">暂无相关信息</view>
		<!--没有信息的时候显示end-->
		<view class="content pad30">

			<view class="yhq_dl" v-for="(item,index) in rows" :key="item.id">
				<view class="yhq_dt">
					<view class="yhq_title">{{item.type}}</view>
					<view class="yhq_txt">{{item.name}}</view>
					<view class="yhq_gz">
						<view class="yhq_yxq">有效期：至{{item.end}}</view>
						<view class="fl" @click="gzbtn" :data-index="index">使用规则<text
								class="iconfont icon-anniu-jiantouxiangyou_o"></text></view>
					</view>
				</view>
				<view class="yhq_dd">
					<view class="yhq_price">￥<text>{{item.price}}</text></view>
					<view class="yhq_jaz">价值</view>
					<!--如果是已使用或已过期 给 yhq_btn 加上 no-->
					<navigator hover-class="none" :url="'/pages/user/mycouponuse/mycouponuse?id='+item.id"
						v-if="status==0">
						<view class="yhq_btn">去使用</view>
					</navigator>
					<view class="yhq_btn no" v-if="status==1||status==2">{{status==1?'已使用':'已过期'}}</view>
				</view>
			</view>



		</view>

		<!--规则弹窗-->
		<view class="modal-mask" @click="hideModal" v-if="showModal"></view>
		<view class="modal-dialog" v-if="showModal">
			<view class="modal-content">
				<view class="modal-title">使用规则</view>
				<view class="modal-close" @click="hideModal">
					<view></view>
				</view>
				<view class="modal-box">
					<rich-text :nodes="desc"></rich-text>
				</view>
			</view>
		</view>
		<!--规则弹窗end-->
	</view>
</template>

<script>
	import API from "@/common/api.js"
	export default {
		data() {
			return {
				showModal: false,
				rows: [],
				status: 0,
				num1: 0,
				num2: 0,
				num3: 0,
				desc: ""

			}
		},
		onLoad() {
			var $this = this
			API.post("coupon/mycoupontj").then((res) => {
				if (res.code == 1) {
					$this.num1 = res.data.num1
					$this.num2 = res.data.num2
					$this.num3 = res.data.num3
				}
			})
			this.search()
		},
		methods: {
			qiehuan(e) {
				this.status = e.currentTarget.dataset.v;
				this.search()

			},
			search() {
				var $this = this
				API.post("coupon/mycoupon", {
					status: this.status
				}).then((res) => {
					if (res.code == 1) {
						$this.rows = res.data
					}
				})
			},
			gzbtn(e) {
				var index = e.currentTarget.dataset.index;
				this.desc = this.rows[index].content
				this.showModal = true
			},
			hideModal() {
				this.showModal = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.container {
		padding: 120rpx 0 40rpx;
	}

	.myorder_tit {
		width: 100%;
		overflow: hidden;
		padding-top: 10rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		background: #f7f7f7;
		position: fixed;
		top: var(--window-top);
		left: 0;
		right: 0;
		font-weight: bold;
		z-index: 2;
	}

	.myorder_tul {
		width: 100%;
		display: flex;
	}

	.myorder_tli {
		flex: 1;
		text-align: center;
		position: relative;
	}

	.myorder_tli.active {
		color: $color;
	}

	.myorder_tli.active:before {
		content: "";
		width: 60rpx;
		height: 4rpx;
		background: $color;
		line-height: 0;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
	}

	.myorder_no {
		width: 100%;
		overflow: hidden;
		margin-top: 150rpx;
		text-align: center;
		color: #999;
	}

	.yhq_dl {
		width: 100%;
		display: flex;
		position: relative;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.yhq_dl:after,
	.yhq_dl:before {
		content: '';
		position: absolute;
		right: 194rpx;
		background: #f7f7f7;
		width: 24rpx;
		height: 24rpx;
		border-radius: 24rpx;
	}

	.yhq_dl:after {
		top: -12rpx;
	}

	.yhq_dl:before {
		bottom: -12rpx;
	}

	.yhq_dt {
		flex: 1;
		padding: 24rpx 30rpx;
		border-right: 2rpx #eee dashed;
	}

	.yhq_dd {
		width: 204rpx;
		text-align: center;
	}

	.yhq_title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.yhq_txt {
		margin-top: 20rpx; font-size: 26rpx;
		min-height: 72rpx;
		line-height: 36rpx;
	}

	.yhq_gz {
		margin-top: 22rpx;
		width: 100%;
		overflow: hidden;
		color: #999;
	}

	.yhq_gz .iconfont {
		font-size: 28rpx;
		margin-left: 6rpx;
	}

	.yhq_price {
		margin-top: 26rpx; font-weight: bold;
		color: #ff6600;
	}

	.yhq_price text {
		font-size: 44rpx;
	}

	.yhq_jaz { font-size: 28rpx;
		color: #666;
		margin-top: 10rpx;
	}

	.yhq_btn {
		margin: 30rpx auto 0;font-size: 28rpx;
		display: inline-block;
		padding: 0 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 48rpx;
		color: #fff;
		color: $color;
		border: 2rpx solid $color;
	}

	.yhq_btn.no {
		color: #999;
		border-color: #ddd;
	}

	.yhq_yxq {
		float: left;
		margin-right: 10rpx;
	}

	/* #ifdef H5 */
	.myorder_tit {
		top: 0;
	}

	/* #endif */
</style>